<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* display: */
        *{
            margin: 0;
            padding: 0;
        }
        /* .main{
            font-size:0;
        }
        
        .left{
            display:inline-block;
            width: 236px;
            height: 400px;
            background-color: rebeccapurple;
            font-size:20px;
        }
        .right{
            display:inline-block;
            width: 992px;
            height: 400px;
            background-color: blue;
            font-size:20px;
        } */

        /* 项目使用的技巧: inline-block 对齐的属性vertical-align:middle/top/bottom/px */
/*         .icon{
            display: inline-block;
            vertical-align: -2px;
            width: 16px;
            height: 16px;
            background: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/tit_arrow/sprite.png) no-repeat;
        } */

        /* text-align:left/center/right 文本对齐属性 - 文字 / 行内块*/
        .main1{
            width:1080px;
            margin:auto;
            font-size: 0;
        }
        .main1 .item{
            display: inline-block;
            width:33.33%;
           padding:20px 0;
            font-size: 20px;
        }
        .main1 .icon{
            width:50px;
            height:50px;
            background: url(https://mobike.com/cn/assets/themes/moby/img/icon-wechat.png) no-repeat;
            background-size: contain;
        }
        .main1 .icon,.main1 .text{
            display: inline-block;
            vertical-align: middle;
        }
        .main1 .item:nth-child(1){
            background-color: rebeccapurple;
            text-align: left;
        }
        .main1 .item:nth-child(2){
            background-color: blue;
            text-align: center;
        }
        .main1 .item:nth-child(3){
            background-color: green;
            text-align: right;
        }
    </style>
</head>
<body>
    <!-- 横向排列 -->
    <!-- 
        行内标签： 左右结构 / 设置宽高不起作用/ display:inline
        块级标签:  上下结构 / display:block / 可以设置宽度
        行内块:    左右结构 + 可以设置宽高大小  

        行(行内/行内块) 特点问题: 会受到我们标签换行符的影响产生默认的间距
        解决办法: 给父容器 font-size:0;  去间距
        问题: 兼容性  - display:inline-block

        需求:  图标 + 文字  (inline-block + vertical-align)  => 垂直对齐
              文本对齐(inline-block + text-align)   =>  水平对齐

              原理:IFC/BFC

        font-size:0;多个作用
        +  去inline-block 的间距
        +   让文字隐藏消失(logo)  - text-indent/font-size    
    -->

    
<!--     <div class="icon"></div> 图标

    <div class="main">
        <div class="left">11</div>
        <div class="right">22</div>
    </div>

    <span>行内元素</span>
    <div>块级标签</div> -->

    <!-- 三个 左/中/右 -->
    <div class="main1">
        <div class="item">
            <div class="icon"></div>
            <div class="text">珠峰</div>
        </div>
        <div class="item">
            <div class="icon"></div>
            <div class="text">珠峰</div>
        </div>
        <div class="item">
            <div class="icon"></div>
            <div class="text">珠峰</div>
        </div>
    </div>
</body>
</html>